<template>
  <div>
    <el-form :inline="true"   class="search-form" size="medium" label-width="100px">
      <el-form-item  label="来源:" >
        <el-select v-model="params.cooperationSource" placeholder="请选择来源" clearable>
          <el-option label="安卓" value="android"></el-option>
          <el-option label="crm后台" value="crm"></el-option>
          <el-option label="erp后台" value="erp"></el-option>
          <el-option label="苹果" value="iOS"></el-option>
          <el-option label="官网" value="website"></el-option>
          <el-option label="微信" value="wx"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item  label="状态:" >
        <el-select v-model="params.cooperationState" placeholder="请选择状态" clearable>
          <el-option label="未处理" value="0"></el-option>
          <el-option label="已处理" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item >
        <el-button type="primary" icon="el-icon-search" @click="searchForm">查询</el-button>
        <el-button icon="el-icon-refresh" @click="clearSearch">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table   :data="intentionList" border v-loading="loading" >
      <el-table-column prop="cooperationName" label="姓名"   align="center"></el-table-column>
      <el-table-column prop="cooperationMobile" label="联系方式"   align="center"></el-table-column>
      <el-table-column prop="cooperationCompany" label="公司"    align="center"></el-table-column>
      <el-table-column prop="cooperationRemark" label="备注信息"    align="center"></el-table-column>
      <el-table-column label="来源"    align="center">
        <template slot-scope="scope">
          {{scope.row.cooperationSource | filterCooperationSource}}
        </template>
      </el-table-column>
      <el-table-column label="状态"   align="center" >
        <template slot-scope="scope">
          <el-tag :type="scope.row.cooperationState==1?'success':'info'">{{scope.row.cooperationState | filterCooperationState}}</el-tag>

        </template>
      </el-table-column>
      <el-table-column prop="cooperationCreateTime" label="提交时间"   align="center" >
        <template slot-scope="scope">
          {{scope.row.cooperationCreateTime | filterDateForSec}}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row.cooperationId)"  size="small"  type="primary">编辑</el-button>
          <el-button @click="handleState(scope.row.cooperationId,1)"  v-if="scope.row.cooperationState == 0" size="small">处理</el-button>
          <el-button @click="handleState(scope.row.cooperationId,0)"  v-if="scope.row.cooperationState == 1" size="small">取消处理</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pageIndex"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: true,
        imgUrl:imageUrl,
        intentionList:[],
        params:{
          pageSize:10,
          pageIndex:1,
          cooperationSource:'',
          cooperationState:'',
        },
        pageTotal:0
      }
    },
    created(){
      // this.getData();
    },
    methods:{
      getData(){
        this.loading = true;
        this.$axios.get(this.$api.getCooperationList,{params: this.params})
          .then((res)=>{
            this.intentionList = res.data.result;
            this.loading = false;
          })
        this.$axios.get(this.$api.getCooperationNum,{params: this.params})
          .then((res)=>{
            this.pageTotal = res.data.result.total
          })
      },
      clearSearch(){
        this.params.pageIndex = 1;
        this.params.cooperationSource = '';
        this.params.cooperationState = '';
        this.getData();
      },
      searchForm(){
        this.params.pageIndex = 1;
        this.getData();
      },
      handleSizeChange(val) {
        this.params.pageSize = val;
        this.getData();
      },
      handleCurrentChange(val) {
        this.params.pageIndex = val;
        this.getData();
      },
      handleEdit(cooperationId) {
        this.$router.push("/intention/intentionForm/"+ cooperationId)
      },
      handleState(cooperationId,cooperationState) {
        var confirmTxt = '确定处理合作意向？';
        if (cooperationState == 0) {
          confirmTxt = '确定取消处理合作意向？';
        }
        this.$confirm(confirmTxt, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios(this.$api.updateCooperation,{params:{cooperationId:cooperationId,cooperationState:cooperationState}}).then((res) => {
              if (res.data.code == 1){
                  this.$message({
                      message: '修改成功',
                      type: 'success'
                  });
                  this.getData();
              }
          })
        });
      }


    },
    activated() {
      this.getData();
    },

  };
</script>
